import React, { Component } from 'react'
import {Card, Select, Input, Button, Table, message, Modal, Form} from 'antd'
import Icon from '@ant-design/icons';
import G6 from '@antv/g6';

const Option = Select.Option

export default class Type extends Component {

    componentDidMount(){
        this.getCategorys()
    }

    getCategorys= ()=>{
        // fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
        // .then((res) => res.json())
        // .then((data) => {
            
            let data = this.data
            console.log('llll',data)
            const container = document.getElementById('container');
            const width = container.scrollWidth;
            const height = container.scrollHeight || 500;
            const graph = new G6.TreeGraph({
            container: 'container',
                width,
                height,
                linkCenter: true,
                modes: {
                    default: [
                    {
                        type: 'collapse-expand',
                        onChange: function onChange(item, collapsed) {
                        const data = item.getModel();
                        data.collapsed = collapsed;
                        return true;
                        },
                    },
                    'drag-canvas',
                    'zoom-canvas',
                    ],
                },
                defaultNode: {
                    size: 26,
                    anchorPoints: [
                    [0, 0.5],
                    [1, 0.5],
                    ],
                },
                defaultEdge: {
                    type: 'cubic-vertical',
                },
                layout: {
                    type: 'compactBox',
                    direction: 'TB',
                    getId: function getId(d) {
                    return d.id;
                    },
                    getHeight: function getHeight() {
                    return 16;
                    },
                    getWidth: function getWidth() {
                    return 16;
                    },
                    getVGap: function getVGap() {
                    return 80;
                    },
                    getHGap: function getHGap() {
                    return 20;
                    },
                },
            });

            graph.node(function (node) {
                let position = 'right';
                let rotate = 0;
                if (!node.children) {
                    position = 'bottom';
                    rotate = Math.PI / 2;
                }
                return {
                    label: node.id,
                    labelCfg: {
                        position,
                        offset: 5,
                        style: {
                            rotate,
                            textAlign: 'start',
                        },
                    },
                };
            });

            graph.data(data);
            graph.render();
            graph.fitView();

            if (typeof window !== 'undefined')
            window.onresize = () => {
                if (!graph || graph.get('destroyed')) return;
                if (!container || !container.scrollWidth || !container.scrollHeight) return;
                graph.changeSize(container.scrollWidth, container.scrollHeight);
            };
        

    }

    data = {
        "id": "诗词分类",
        "children": [
            {
                "id": "朝代",
                "children": [
                {
                    "id": "唐"
                },
                {
                    "id": "宋"
                },
                {
                    "id": "元"
                },
                {
                    "id": "明"
                },
                {
                    "id": "清"
                },
                {
                    "id": "魏晋"
                },
                ]
            },
            {
                "id": "诗人",
                "children": [
                {
                    "id": "李白"
                },
                {
                    "id": "杜甫"
                },
                {
                    "id": "苏轼"
                },
                {
                    "id": "陶渊明"
                },
                {
                    "id": "曹操"
                },
                {
                    "id": "王维"
                },
                {
                    "id": "白居易"
                }
                ]
            },
            {
                "id": "节日",
                "children": [
                {
                    "id": "中秋节"
                },
                {
                    "id": "重阳节"
                },
                {
                    "id": "元宵节"
                },
                {
                    "id": "除夕"
                },
                {
                    "id": "七夕"
                },
                {
                    "id": "清明节"
                }
                ]
            },
            {
                "id": "花卉",
                "children": [
                {
                    "id": "莲花"
                },
                {
                    "id": "菊花"
                },
                {
                    "id": "梅花"
                },
                {
                    "id": "兰花"
                },
                {
                    "id": "桂花"
                },
                {
                    "id": "荷花"
                },
                {
                    "id": "杏花"
                }
                ]
            },
            {
                "id": "名山",
                "children": [
                {
                    "id": "泰山"
                },
                {
                    "id": "华山"
                },
                {
                    "id": "衡山"
                },
                {
                    "id": "恒山"
                },
                {
                    "id": "嵩山"
                }
                ]
            },
            {
                "id": "主题",
                "children": [
                {
                    "id": "山水田园"
                },
                {
                    "id": "边塞诗"
                },
                {
                    "id": "送别诗"
                },
                {
                    "id": "讽喻诗"
                },
                {
                    "id": "哲理诗"
                },
                {
                    "id": "羁旅诗"
                },
                {
                    "id": "咏史诗"
                },
                {
                    "id": "爱情诗"
                }
                ]
            },
            {
                "id": "词牌名",
                "children": [
                {
                    "id": "如梦令"
                },
                {
                    "id": "长相思"
                },
                {
                    "id": "破阵子"
                },
                {
                    "id": "一剪梅"
                },
                {
                    "id": "江城子"
                }
                ]
            },
            ]
    }

    render() {
        return (
            <div className='whole' id='container' style={{width:1250,height:450}}>
                <h1>书阁</h1>
            </div>
        )
    }
}
















// import React, { Component } from 'react'
// import {Card, Select, Input, Button, Table, message, Modal, Form} from 'antd'
// import Icon from '@ant-design/icons';

// const Option = Select.Option

// export default class Type extends Component {
//     state = {
//         loading: false,
//         visible: false,
//         inp:'',
//         categorys:[], //作品列表
//         leo:'',
//         let:'',
//     };

//     delTap=(b)=>{
//         // console.log(this.state.categorys)
//         console.log(b)
//         fetch('https://wx.original5.xyz:2003/type',{
//             method:'DELETE',
//             body:JSON.stringify({
//                 cid:b.cid
//             })
//         }).then(res=> res.json())
//         .then((data)=>{
//             console.log('success',data)
//         })
//         // window.location.reload(true)
//     }

//     // 初始化Table的所有列信息
//     componentWillMount(){
//         this.initColumns()
//     }

//     initColumns = () =>{
//         this.columns = [
//             {
//                 title: 'Cid',
//                 dataIndex: 'cid',
//             },
//             {
//                 title: 'Clevel1',
//                 dataIndex: 'clevel1',
//                 render:name => <a href="#">{name}</a>
//             },
//             {
//                 title: 'Clevel2',
//                 dataIndex: 'clevel2',
//             },
//             {
//                 title: 'delete',
//                 dataIndex: 'delete',
//                 render:(_,b)=> <Button onClick={(e)=>this.delTap(b)} style={{backgroundColor:'#ffc06f'}}>删除</Button>
//             },
//         ];
//     }
//     // 发请求
//     componentDidMount(){
//         this.getCategorys()
//     }

//     getCategorys= async ()=>{
//         this.setState({ loading:true })
//         fetch('https://wx.original5.xyz:2003/type/',{
//             method:'GET',
//             headers:{
//                 // 'access-control-allow-origin':'*',
//                 'Content-Type':'application/json;charset=UTF-8'
//             },
//         }).then(res=> res.json())
//         .then((data)=>{
//             console.log('sucs',data)
//             this.setState({
//                 categorys:data
//             })
//         })

//     }

//     getInp = (e)=>{
//         this.setState({
//             inp:e.target.value
//         })
//     }

//     // onSearch = () =>{
//     //     console.log(this.state.inp)
//     //     const {inp} = this
//     //     fetch(`https://wx.original5.xyz:2003/type/search?inp=${this.state.inp}`,{
//     //         method:'GET',
//     //         headers:{
//     //             'Content-Type':'application/json;charset-UTF-8'
//     //         },
//     //     }).then(res=> res.json())
//     //     .then((data)=>{
//     //         console.log(data)
//     //         this.setState({
//     //             categorys:data
//     //         })
//     //     })
//     // }

//     showModal = () => {
//         this.setState({
//             visible: true,
//         });
//     };

//     handleOk = () => {
//         this.setState({ loading: true });
//         setTimeout(() => {
//             this.setState({ loading: false, visible: false });
//         }, 1000);

//         fetch('https://wx.original5.xyz:2003/type/',{
//             method:'POST',
//             // mode:'cors',
//             headers:{
//                 // 'access-control-allow-origin':'*',
//                 'Content-Type':'application/json;charset=UTF-8'
//             },
//             body:JSON.stringify({
//                 username:this.state.leo,
//                 password:this.state.let
//             })
//         }).then(res=> res.json())
//         .then((data)=>{
//             console.log('add success',data)
//         })
//         // window.location.reload(true)
//     };

//     handleCancel = () => {
//         this.setState({ visible: false });
//     };

//     getLevelo = (e) => {
//         this.setState({
//             leo:e.target.value
//         })
//     }

//     getLevelt = (e) => {
//         this.setState({
//             let:e.target.value
//         })
//     }
    
//     render() {
//         const title = (
//             <span>
//                 {/* <Input style={{width:300, margin:'0 10px'}} onChange={this.getInp} placeholder="请输入关键字" />
//                 <Button type="primary" onClick={this.onSearch} style={{backgroundColor:'#ffc06f'}}>搜索</Button> */}
//                 {/* <Button type="primary" onClick={this.showModal} style={{backgroundColor:'#ffc06f',position:'absolute',right:100}}>
//                     + 添加
//                 </Button> */}
//             </span>
//         )
//         const { visible, loading } = this.state;

//         const { categorys } = this.state
//         return (
//             <Card title={title}>
//                 <Table 
//                     rowKey={columns => columns.id}
//                     bordered={true} 
//                     columns={this.columns}
//                     dataSource={categorys}
//                     pagination={{defaultPageSize:5, showQuickJumper:true}}
//                 />

//                 {/* <Modal
//                     visible={visible}
//                     title="添加分类"
//                     onOk={this.handleOk}
//                     onCancel={this.handleCancel}
//                     footer={[
//                         <Button key="back" onClick={this.handleCancel}>
//                             返回
//                         </Button>,
//                         <Button key="submit" type="primary" htmlType="submit" onClick={this.handleOk} style={{backgroundColor:'#ffc06f'}}>
//                             确定
//                         </Button>,
//                     ]}
//                 >
//                     <Form
//                         name="basic"
//                         autoComplete="off"
//                         >
//                         <Form.Item
//                             label="Clevel1"
//                             name="Clevel1"
//                         >
//                             <Input onChange={this.getLevelo} />
//                         </Form.Item>

//                         <Form.Item
//                             label="Clevel2"
//                             name="Clevel2"
//                         >
//                             <Input onChange={this.getLevelt}/>
//                         </Form.Item>
//                     </Form>
//                 </Modal> */}
//             </Card>
//         )
//     }
// }
